<template>
  <div class="app-container">
    <div class="playerHead">
      <div class="headItem">
        <p>彩种类型:</p>
        <el-select v-model="agent" placeholder="请选择" class="selectBox">
          <el-option v-for="item in agentList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="headItem">
        <p>开奖期数:</p>
        <el-input v-model="memo" placeholder="期数" />
      </div>
      <div class="headItemThree">
        <p>开奖时间:</p>
        <el-date-picker v-model="value1" type="datetime" placeholder="开始时间" />
        <el-date-picker v-model="value1" type="datetime" placeholder="结束时间" />
      </div>
      <div class="headItem">
        <p>开奖状态:</p>
        <el-select v-model="agent" placeholder="请选择" class="selectBox">
          <el-option v-for="item in agentList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="headItem">
        <p>开奖类型:</p>
        <el-select v-model="agent" placeholder="请选择" class="selectBox">
          <el-option v-for="item in agentList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="headItem">
        <el-button type="primary" icon="el-icon-search" @click="searchList">搜索</el-button>
      </div>
      <div class="headItem">
        <el-button type="primary" icon="el-icon-search" @click="saveSetUp">结算异常</el-button>
      </div>
    </div>
    <div class="playerForm">
      <el-table
        :data="userList"
        style="width: 100%"
        :header-cell-style="{background:'#2b679c',color:'#fff'}"
        stripe
        border
        :cell-style="{padding:0+'px'}"
      >
        <el-table-column prop="auto_id" label="彩种类型" width="140" />
        <el-table-column prop="psnname" label="期号" width="140" />
        <el-table-column prop="room_code" label="开奖号码" width="170" />
        <el-table-column prop="score" label="开奖类型" />
        <el-table-column prop="username" label="盈亏" width="170">
          <template slot-scope="scope">
            <p>{{ scope.row.is_agent }}￥</p>
          </template>
        </el-table-column>
        <el-table-column prop="register_date" label="开奖时间" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-lock"
              @click="handleEdit(scope.$index, scope.row)"
            >设置无效</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="playerNum">
        <!--  <el-pagination
          :current-page="currentPage4"
          :page-sizes="[10,25]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
        <div class="">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            hide-on-single-page
            @size-change="handleSizeChange"
          />
        </div>
        <div class="playerNumRight">
          显示第 1 到第 {{ selNumPage }} 条记录，总共 {{ total }} 条记录 每页显示
          <el-select v-model="selNumPage" placeholder="请选择" class="selectBox">
            <el-option v-for="item in numPage" :key="item.label" :label="item.label" :value="item.label" />
          </el-select>
          条记录
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      psnname: '',
      memo: '',
      vipStatus: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '禁言'
      }, {
        value: '3',
        label: '黑名单'
      }],
      numPage: [{
        value: '0',
        label: '10'
      }, {
        value: '1',
        label: '25'
      }],
      status: '0',
      agent: '0',
      agentList: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '非代理'
      }, {
        value: '2',
        label: '是'
      }],
      checked: false,
      userList: [{
        auto_id: '宾果28',
        id: '862755a457db3f7afefea639b4bc91f6',
        is_agent: 0,
        is_focus: false,
        is_robot: false,
        locked_score: 0,
        max_balance: 0,
        memo: '哈哈',
        num: 1,
        openId: '',
        parentId: '',
        password: 'aa111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        psnname: '111222',
        register_date: '2024-03-24 23:43:56',
        room_code: '等待开奖',
        score: '-',
        status: 0,
        username: 'a111222'
      }, {
        auto_id: '宾果28高赔率',
        id: '07f8fa4ec37d6c51261fb1e6fe95875d',
        is_agent: 0,
        is_focus: false,
        is_robot: false,
        locked_score: 0,
        max_balance: 0,
        memo: '袭击',
        num: 1,
        openId: '',
        parentId: '',
        password: 'qaz5201314',
        photo: '/images/rebot/t01aa2b421dc0aa2a4b.jpg',
        psnname: '325235',
        register_date: '2024-04-09 21:04:01',
        room_code: '等待开奖',
        score: '-',
        status: 0,
        username: 'qaz52011'
      }, {
        auto_id: '幸运飞艇API68',
        id: '02a5e511a06efdcfbc0d1fa215ce351f',
        is_agent: 0,
        is_focus: true,
        is_robot: false,
        locked_score: 0,
        max_balance: 0,
        num: 1,
        openId: '',
        parentId: '',
        password: 'honghuoqqq111',
        photo: '/images/rebot/t01573026b1cd767cdf.jpg',
        psnname: '1112222214',
        register_date: '2024-04-03 15:47:18',
        room_code: '等待开奖',
        score: '-',
        status: 0,
        username: 'honghuo'
      }, {
        auto_id: '澳洲幸运10',
        id: '0b53ca910687916c362530a5daabee46',
        is_agent: 0,
        is_focus: false,
        is_robot: false,
        locked_score: 0,
        max_balance: 0,
        num: 1,
        openId: '',
        parentId: '',
        password: 'qaz5201314',
        photo: '/images/rebot/t018a9dff1ffa6a4ae5.jpg',
        psnname: '4135415',
        register_date: '2024-04-03 02:03:44',
        room_code: '等待开奖',
        score: '-',
        status: 0,
        username: 'qaz520'
      }],
      baseURL: '',
      total: 40,
      selNumPage: 10,
      pageNumber: 1,
      currentPage4: 4
    }
  },
  mounted() {
    this.baseURL = process.env.VUE_APP_BASE_API
    this.getUserList()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 搜索玩家列表
    searchList() {
      this.getUserList()
    },
    // 修改玩家自动代理
    saveSetUp() {
      var userStatus = ''
      if (this.checked) {
        userStatus == 0
      } else {
        userStatus == 1
      }
    },
    // 获取用户列表
    getUserList() {
      var agentNum = ''
      if (this.agent == 0) {
        agentNum = ''
      } else {
        agentNum = parseInt(this.agent) - 1
      }
      // const obj = {
      //   agent: agentNum,
      //   memo: this.memo,
      //   pageNumber: this.pageNumber,
      //   pageSize: this.selNumPage,
      //   sortOrder: 'asc',
      //   status: this.status
      // }
      // axios.post(
      //   'http://34.150.103.72:8080/api/psndoc/list?_mid=1&_token=1&_ssoServer=1&pageSize=10&pageNumber=1', {
      //     params: { // 此处为get请求传递的参数 但是一把get请求是没有参数的 params是固定的
      //       agent: agentNum,
      //       memo: this.memo,
      //       pageNumber: this.pageNumber,
      //       pageSize: this.selNumPage,
      //       psnname: this.psnname,
      //       sortOrder: 'asc',
      //       status: this.status
      //     }
      //   }).then(function(response) {
      //   console.log(response, 666666)
      // }).catch(function(error) {
      //   console.log(error, 44444)
      // })
    }
  }
}
</script>
<style scoped>
	p{
		margin: 7px 0px;
	}
	.playerHead {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dfs {
		display: flex;
		align-items: center;
		padding: 0 0px 0px 10px;
		box-sizing: border-box;
	}

	.playerNum {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 10px;
		justify-content: space-between;
	}

	.playerNumRight {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 13px;
	}

	.headItem,
	.headItemThree {
		display: flex;
		align-items: center;
		font-size: 13px;
		font-weight: 500;
	}

	/deep/.headItemThree .el-input--medium .el-input__inner {
		height: 25px;
		line-height: 25px;
		width: 130px;
		font-size: 12px;
		margin-right: 5px;
	}

	/deep/.headItemThree .el-input--medium .el-input__icon {
		line-height: 25px;
	}

	/deep/.el-table--medium th,
	.el-table--medium td {
		padding: 0px !important;
	}

	.headItem p {
		width: 60%;
		margin: 0 5px;
	}

	.headItemThree p {
		margin: 0 5px;
	}

	.playerForm {
		margin-top: 10px;
	}

	/deep/.playerForm .el-button--mini {
		padding: 5px 11px;
	}

	.moreButton {
		padding: 5px 5px !important;
	}

	.dafsf {
		width: 80px;
		height: 130px;
		background-color: #fff;
		position: absolute;
		top: 50px;
		left: 50%;
		z-index: 22;
		display: none;
	}

	.photo {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	/deep/.headItem .el-button--medium {
		padding: 5px 6px;
		font-size: 12px;
		margin-left: 5px;
		background-color: #c345cc;
		border-radius: 4px;
		border-color: #c345cc;
	}

	.headItemTow p {
		margin-left: 20px;
	}

	/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #c345cc;
		border-color: #c345cc;
	}

	/deep/.headItem .el-input--medium .el-input__inner {
		height: 25px;
		line-height: 25px;
		width: 170px;
		font-size: 12px;
		padding-left: 10px;
	}

	/deep/.selectBox .el-input--medium .el-input__inner {
		width: 80px;
	}

	/deep/.el-select .el-input .el-select__caret {
		margin-top: 6px;
	}

	/deep/.el-select .el-input .el-select__caret.is-reverse {
		margin-top: -6px;
	}

	/deep/.el-table th,
	.el-table td {
		padding: 0px;
	}

	/deep/.el-table--medium th,
	.el-table--medium td {
		padding: 0px !important;
	}

	/deep/.el-table th>.cell {
		padding: 5px 0px;
		color: #fff;
		font-size: 13px;
		text-align: center;
	}

	/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
		background: #f4f3fb;
		border-right: 1px solid #f4f4f4;
	}

	/deep/.playerForm .el-table th .is-leaf,
	.el-table td {
		border-bottom: none !important;
		border-right: 1px solid #f4f4f4;
	}

	/deep/.playerForm .el-button--primary {
		background-color: #cd4441;
		border-color: #cd4441;
	}

	/deep/.playerForm .el-button--danger {
		background-color: #c345cc;
		border-color: #c345cc;
	}

	/deep/.playerForm .el-button--warning {
		background-color: #c345cc;
		border-color: #c345cc;
	}

	/deep/.playerForm .el-button {
		margin-left: 0;
		margin-bottom: 5px;
		margin-right: 5px;
	}

	/deep/.playerForm .el-table .cell {
		text-align: center;
	}

	/deep/.playerNumRight .el-input--medium .el-input__inner {
		height: 30px;
		line-height: 30px;
		width: 70px;
		margin: 0 5px;
		font-size: 12px;
	}

	.remarkInput {
		height: 25px;
		line-height: 25px;
		width: 150px;
		font-size: 13px;
		padding-left: 10px;
	}

	/deep/.remarkInput .el-input__inner {
		height: 25px;
		text-align: center;
		line-height: 25px;
	}

	/deep/.el-pager li.active {
		color: #c345cc;
	}

	/deep/.el-pager li:hover {
		color: #c345cc;
	}

	/deep/.el-pagination .btn-prev:hover {
		color: #c345cc;
	}

	/deep/ .el-pagination .btn-next:hover {
		color: #c345cc;
	}

	/* /deep/.playerNum .el-select .el-input .el-select__caret {
		margin-top: 0px;
	} */
	/deep/.el-select-dropdown__item.selected {
		color: #c345cc !important;
	}

	/deep/.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 140px;
	}
</style>
